<script setup lang="ts" name="headerNav">
import { reactive, toRefs } from 'vue'
import {useRouter} from "vue-router";

const router = useRouter();
const emit = defineEmits(["goBack"]);
const props = defineProps({
  leftArrow: {
    type: Boolean,
    default: true,
  },
  slefBack: {
    type: Boolean,
    default: false,
  },
  titelText: {
    type: String,
    default: "",
  },
});
const state = reactive({
  leftArrowtag: props?.leftArrow,
  titelTextvalue: props?.titelText,
});

// 左边返回
const onClickLeft = () => {
  if (props?.leftArrow) {
    if (props?.slefBack) {
      emit("goBack");
    } else {
      router.go(-1);
    }
  }
};

// 右边返回
const onClickRight = () => {};

const {leftArrowtag, titelTextvalue} = toRefs(state);
</script>

<template>
  <div class="header__nav">
    <van-nav-bar
        safe-area-inset-top
        :title="titelTextvalue"
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
      <template #left>
        <van-icon
            v-if="leftArrowtag"
            class="left_icon"
            name="arrow-left"
        />
      </template>
    </van-nav-bar>
  </div>
</template>

<style scoped lang="less">
.header__nav {
  position: fixed;
  top: 0;
  width: 100%;
  .left_icon {
    color: black !important;
  }
}
</style>
